<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <!--
        属性节点(html属性 => 标签内可见的)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明 
    -->
    <div style="background-color:#f00">
        <span>这是标签内的文本</span>
    </div>
</body>
<script>

    var box = document.querySelector("div");
    console.dir(box);
    function getStyle(ele,cssKey) {
        if (window.getComputedStyle) { // 有=> 常规浏览器
           return window.getComputedStyle(ele)[cssKey];   //window.getComputedStyle(box)["width"] 
        } else { // 没有 => 低版本IE
           return ele.currentStyle[cssKey];
        }
    }


    // console.log(getStyle(box,"width"));
    // console.log(getStyle(box,"height"));
    // var width = parseInt(getStyle(box,"width"));
    // console.log(width + 100);



    // parseInt()   将其他类型转化为整型(也可以用于取整 => 向下取值   作用: a.去单位  b. 向下取值)
    // parseFloat()   将其他类型转化为浮点型(保留小数部分)

    // 技巧: 找到第一个非数字之前的数,将其转化为整数/也可保留小数

    // 一般用于处理 字符串/数字 类型, 其他类型不建议使用(多数得到NaN)

    // int  整型(整数)  float 浮点型(小数)

    var str = "200.55px";
    console.log(parseInt(str));  // "200.55"  取整 200
    console.log(parseFloat(str));  // 200.55

    // console.log(parseInt(200.55));
    // console.log(parseFloat(200.55));



    // 除数字和字符串以外的类型

    // console.log(parseInt(true));
    // console.log(parseFloat(false));
    // console.log(parseFloat(null));
    // console.log(parseFloat(undefined));
    // console.log(parseFloat({a:1,b:2}));








</script>

</html>